<template>
	<view class="container">
		<view class="style">
			<view class="title">作品：{{ opus.title }}</view>
			<view class="cell">
				<view class="item">
					<view class="left">备注</view>
					<view class="right">购买此作品，赠送同款红包封面</view>
				</view>
				<view class="item">
					<view class="left">数量</view>
					<view class="right">
						<u-number-box @change="onChangeNumber" v-model="form.number"></u-number-box>
					</view>
				</view>
				<view class="item">
					<view class="left">库存</view>
					<view class="right">{{ opus.stock }}</view>
				</view>
				<view class="item">
					<view class="left">运费</view>
					<view class="right">￥0.00</view>
				</view>
				<view class="item">
					<view class="left">限时优惠</view>
					<view class="right price">￥{{ opus.price }}</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="title">收货信息</view>
			<view class="cell">
				<view class="item">
					<view class="left">联系人</view>
					<view class="right">
						<u--input placeholder="请输入联系人" border="none" v-model="form.link_name"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="left">联系电话</view>
					<view class="right">
						<u--input placeholder="请输入联系电话" border="none" v-model="form.link_phone"></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="submit" v-on:click="onSubmit">
			<view class="btn">
				<u-button color="#f22e38" shape="circle" :text="'￥' + total_price + ' 立即购买'"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		detail,
		submit
	} from '@/api/author/opus.js';
	export default {
		data() {
			return {
				store: [],
				total_price: 0.0,
				opus: [],
				form: {
					pay_price: '',
					link_name: '',
					link_phone: '',
					number: 1
				}
			};
		},
		onLoad(options) {
			this.opus_id = options.opus_id
			this.getOpus()
		},
		methods: {
			getOpus() {
				detail({
					opus_id: this.opus_id
				}).then(res => {
					this.opus = res.data.opus
					this.calc();
				}).catch(err => {

				})
			},
			onChangeNumber(e) {
				this.form.number = e.value;
				this.calc();
			},
			getStore() {
				let _this = this;
				config({
						key: 'store'
					})
					.then(res => {
						_this.store = res.data.config;
					})
					.catch(err => {});
			},
			onSubmit() {
				let _this = this;
				let form = _this.form;
				form = JSON.stringify(form)
				form = JSON.parse(form)
				form.opus_id = this.opus_id;
				form.pay_price = this.total_price
				submit(form)
					.then(res => {
						// #ifdef MP-WEIXIN
						let payment = res.data.payment;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payment.timeStamp,
							nonceStr: payment.nonceStr,
							package: 'prepay_id=' + payment.prepay_id,
							signType: 'MD5',
							paySign: payment.paySign,
							success: function(res) {
								uni.showToast({
									icon: 'none',
									title: '支付成功',
									success() {
										uni.redirectTo({
											url: '/pages/user/order/index'
										})
									}
								});
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
						// #endif
					})
					.catch(err => {
						console.log(err);
					});
			},
			calc() {
				this.total_price = (this.form.number * this.opus.price).toFixed(
					2);
			},
		}
	};
</script>

<style lang="scss">
	.submit {
		width: 92%;
		position: fixed;
		bottom: 40rpx;
		left: 4%;
		z-index: 999;

		.btn {
			.u-button {
				height: 100rpx;
			}
		}
	}

	.style {
		width: 86%;
		margin: 15rpx auto;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.title {
			margin-bottom: 30rpx;
		}

		.cell {
			display: flex;
			flex-direction: column;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #f4f4f4;
				padding: 15rpx 0rpx;

				.left {
					color: #333;
					font-size: 28rpx;
				}

				.right {
					&.price {
						color: #dd6161;
					}
				}
			}
		}

		.tabs {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 15rpx;
			flex-wrap: wrap;

			.item {
				background-color: #f4f4f5;
				font-size: 24rpx;
				padding: 15rpx 30rpx;
				border-radius: 5rpx;
				margin-bottom: 15rpx;

				&.active {
					background-color: #0dbc8c;
					color: #fff;
				}
			}
		}
	}

	.form {
		width: 86%;
		margin: 15rpx auto;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.title {
			margin-bottom: 30rpx;
		}

		.cell {
			display: flex;
			flex-direction: column;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #f4f4f4;
				padding: 15rpx 0rpx;

				.left {
					width: 20%;
					color: #333;
					font-size: 28rpx;
				}

				.right {
					width: 70%;
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.tabs {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 15rpx;

			.item {
				background-color: #f4f4f5;
				font-size: 24rpx;
				padding: 15rpx 30rpx;
				border-radius: 5rpx;

				&.active {
					background-color: #0dbc8c;
					color: #fff;
				}
			}
		}
	}

	.qrcode {
		width: 90%;
		margin: 15rpx auto;
		padding: 30rpx 15rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		line-height: 38rpx;
		border-radius: 10rpx;

		.cover {
			margin-right: 15rpx;
		}

		.content {
			.title {
				font-weight: bolder;
				font-size: 28rpx;
			}

			.item {
				font-size: 24rpx;
				color: #333;
			}

			.price {
				color: #dd6161;
				font-weight: bolder;
			}
		}
	}
</style>
